<template>
	<div class="myUse">
		<h3>会员中心</h3>
		<router-view></router-view>
		<div class="headPortrait"> <img src="../../assets/logo.png" /> </div>
		<div class="twobtn">
			<router-link tag="button" class="btn1" to="/signIn">
				我要登录
			</router-link>
			<router-link tag="button" class="btn2" to="/register">
			我要注册
			</router-link>
		</div>
		<van-collapse class="Uvant" v-model="activeNames">
			<van-collapse-item title="会员卡" name="1">内容</van-collapse-item>
			<van-collapse-item title="地址管理" name="2">内容</van-collapse-item>
			<van-collapse-item title="我的订单" name="3">内容</van-collapse-item>
			<van-collapse-item title="会员权益" name="4">内容</van-collapse-item>
			<van-collapse-item title="联系我们" name="5">内容</van-collapse-item>
		</van-collapse>
	</div>
</template>

<script>
	// import { Collapse, CollapseItem } from 'vant';
	export default {
		data() {
			return {
				activeNames: ['1'],
			};
		},
	}
</script>

<style lang="scss">
	.myUse {
		h3 {
			width: 100%;
			height: 40px;
			line-height: 40px;
			font-size: 16px;
			font-weight: 600;
			text-align: center;
		}

		.headPortrait {
			width: 100%;
			height: 120px;
			background: lightpink;
			text-align: center;

			img {
				position: relative;
				width: 60px;
				height: 60px;
				top: 30px;

			}
		}

		.twobtn {
			display: flex;
			justify-content: center;
			font-size: 18px;
			margin: 10px auto;

			.btn1 {
				width: 110px;
				height: 50px;
				line-height: 50px;
				background-color: #dddddd;
				border-radius: 5px;
				color: #000;
				margin-right: 25px;

			}

			.btn2 {
				width: 110px;
				height: 50px;
				line-height: 50px;
				background-color: #44bb00;
				color: #fff;
				border-radius: 5px;

			}
		}
		.Uvant{
			.van-cell__title{
				font-size: 18px;
				
			}
		}

	}
</style>
